<template>
  <div>
    <h2>Hook和nextTick</h2>
    <p ref="myp">我是p标签</p>
  </div>
</template>

<script>

import Child from "./Child";

import {ref,onMounted,nextTick} from "vue";

export default {
  setup() {
    
    let myp = ref();

    onMounted(()=> {
        console.log("我是生命周期，mounted");
        // 获取p标签
        console.log(myp.value);

    })

    // 开发中，存在在生命周期钩子函数中无法获取到DOM节点的情况
    // 所以，如果要获取DOM节点，一定写在nextTick()中
    nextTick(() => {
        console.log("nextTick执行");
        // 获取p标签
        console.log(myp.value);
    })

    // 记得暴露出去
    return {myp};

  },
  components: {
    Child
  }
};
</script>

<style>
</style>